<template>
	<view class="ym">
		<view class="suiji">
			<u-swiper :list="list1"></u-swiper>
		</view>


		<view class="jig">
			<text class="jjg">￥326.6</text>
			<text class="wjg">服务总价值￥355</text>
		</view>
		<view class="js">
			<text>深度保洁3小时+擦玻璃10平米</text>

		</view>
		<view class="fuwu">
			<text>服务城市：保定</text>
		</view>
		<text style="margin-bottom: 8px;">套餐包含服务</text>
		<view class="bh">

			<view class="sj">
				<text>深度保洁3小时</text>
				<view><text style="color: #41a863;font-weight: bold;">1</text>次</view>

			</view>
			<view class="sj">
				<text>擦玻璃10平米</text>
				<view><text style="color: #41a863;font-weight: bold;">1</text>次</view>

			</view>



		</view>

		<view class="gmxz">
			<view class="xz">
				<u-divider text="购买须知"></u-divider>
			</view>
			<image src="/static/tp.png" mode=""></image>

		</view>
		<view class="gmxz">
			<view class="xz">
				<u-divider text="购买须知"></u-divider>
			</view>
			<image src="/static/tp.png" mode=""></image>

		</view>
		<view class="gmxz">
			<view class="xz">
				<u-divider text="购买须知"></u-divider>
			</view>
			<image src="/static/tp.png" mode=""></image>

		</view>
		<view class="gmxz">
			<view class="xz">
				<u-divider text="购买须知"></u-divider>
			</view>
			<image src="/static/tp.png" mode=""></image>

		</view>
		<view class="btn">
			<image src="/static/fenxiang.png" mode=""></image>
			<text class="jg">￥414</text>
			<view class="bttn">
				<u-button type="primary" color="#089791" text="立即抢购" @click="ygitem"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				list1: [
					"/static/tp.png",
					"/static/tp.png",
				]
			}
		},
		methods: {
			ygitem() {
				console.log('随机');
			}
		}
	}
</script>

<style lang="scss">
	.ym {
		padding: 8px;

		.suiji {}

		.jig {
			margin-top:4px ;
			.jjg {
				font-size: 18px;
				color: #cb2d01;
			}

			.wjg {
				margin-left: 8px;
				background-color: #ff3801;
				font-size: 14px;
				color: #ffffff;
				border-radius: 15px;
				padding: 4px;

			}
		}

		.js {
			margin-top: 15px;
			font-size: 18px;
			font-weight: bold;
		}

		.fuwu {
			margin-top: 8px;
		}

		.bh {
			margin: 8px;
			padding: 12px;
			display: flex;
			flex-direction: column;

			.sj {
				display: flex;
				justify-content: space-between;
			}
		}

		.gmxz {
			display: flex;
			flex-direction: column;
			align-items: center;

			.xz {}

			image {
				width: 400px;
			}
		}

		.btn {
			position: fixed;
			bottom: 0px;


			border-radius: 8px;

			background-color: white;
			/* 可以设置背景色以提高可见性 */
			padding: 10px 20px;
			/* 设置一些内边距 */
			z-index: 1000;

			display: flex;
			align-items: center;
			justify-content: space-between;
			image{
				width: 25px;
				height: 25px;
				margin-right: 12px;
			}
			.jg {
				font-weight: bold;
				color: #ef846c;
				margin-right: 193px;
			}

			.bttn {}
		}
	}
</style>